<template>
  <div class="app-container">
    <div class="filter-container">
      <el-form :inline="true" :model="listQuery" size="small">
        <el-form-item label="用户昵称">
          <el-input
            v-model="listQuery.nickname"
            placeholder="请输入用户昵称"
          ></el-input>
        </el-form-item>

        <el-form-item label="黑名单类型">
          <el-select
            v-model="listQuery.identity"
            placeholder="请选择黑名单类型"
          >
            <el-option
              v-for="item in blacklistOptions"
              :key="item.key"
              :label="item.label"
              :value="item.key"
            />
          </el-select>
        </el-form-item>

        <el-form-item label="举报类型">
          <el-select v-model="listQuery.source" placeholder="请选择举报类型">
            <el-option
              v-for="item in reportOptions"
              :key="item.key"
              :label="item.label"
              :value="item.key"
            />
          </el-select>
        </el-form-item>

        <el-form-item label="审核状态">
          <el-select
            v-model="listQuery.audit_status"
            placeholder="请选择分类"
            @change="search"
          >
            <el-option
              v-for="item in statusOptions"
              :key="item.key"
              :label="item.label"
              :value="item.key"
            />
          </el-select>
        </el-form-item>

        <el-form-item label="举报日期">
          <el-date-picker
            v-model="listQuery.date"
            type="date"
            value-format="yyyy-MM-dd"
            placeholder="请选择举报日期"
          >
          </el-date-picker>
        </el-form-item>

        <el-form-item>
          <el-button size="small" type="primary" @click="search"
            >查询</el-button
          >
          <el-button @click="reset" size="small">重置</el-button>
        </el-form-item>
        <el-form-item>
          <el-button
            :loading="downloadLoading"
            type="success"
            icon="el-icon-download"
            size="small"
            @click="handleDownload"
          >
            数据导出
          </el-button>
        </el-form-item>
      </el-form>
    </div>

    <el-alert
      v-show="multipleSelection.length !== 0"
      type="success"
      :closable="false"
    >
      <span class="choose-num"
        >选中<b>{{ multipleSelection.length }}</b
        >条</span
      >
      <el-button @click="ok(2)" size="mini">一键通过</el-button>
      <el-button @click="ok(3)" size="mini">一键拒绝</el-button>
    </el-alert>

    <el-table
      key="id"
      v-loading="listLoading"
      :data="list"
      fit
      highlight-current-row
      @selection-change="handleSelectionChange"
    >
      <el-table-column :selectable="selectable" type="selection" width="55">
      </el-table-column>

      <el-table-column
        label="举报人"
        prop="user.nickname"
        show-overflow-tooltip
      >
      </el-table-column>

      <el-table-column label="举报人头像">
        <template slot-scope="{ row }">
          <el-avatar
            v-if="row.user"
            shape="square"
            :src="row.user.avatar"
          ></el-avatar>
        </template>
      </el-table-column>

      <el-table-column label="黑名单来源" prop="source_text">
        <template slot-scope="{ row }">
          <span>{{ row.source_text }}</span>
          <el-link
            @click="handleAdoptView(row)"
            :underline="false"
            type="primary"
            v-if="row.source === 1 && row.source_title"
          >
            {{ row.source_title }}
          </el-link>
        </template>
      </el-table-column>
      <el-table-column label="身份（失信人）" prop="identity_text">
      </el-table-column>
      <el-table-column
        label="微信号"
        prop="wechat"
        show-overflow-tooltip
      ></el-table-column>
      <el-table-column
        label="微信昵称"
        prop="nickname"
        show-overflow-tooltip
      ></el-table-column>
      <el-table-column label="性别" prop="sex_text"></el-table-column>
      <el-table-column
        label="手机号"
        prop="mobile"
        show-overflow-tooltip
      ></el-table-column>
      <el-table-column
        label="举报理由"
        prop="reason"
        show-overflow-tooltip
      ></el-table-column>

      <el-table-column
        label="举报时间"
        prop="create_time"
        show-overflow-tooltip
      ></el-table-column>

      <el-table-column label="审核状态">
        <template slot-scope="{ row }">
          <span>{{ row.audit_status | filterAuditStatus }}</span>
        </template>
      </el-table-column>

      <el-table-column label="操作" class-name="small-padding fixed-width">
        <template slot-scope="{ row, $index }">
          <el-button
            v-if="row.audit_status == 1"
            class="red"
            type="text"
            size="mini"
            @click="handleAudit(row)"
          >
            立即审核
          </el-button>
          <el-button type="text" size="mini" @click="handleView(row)">
            查看
          </el-button>
        </template>
      </el-table-column>
    </el-table>

    <pagination
      v-show="total > 0"
      :total="total"
      :page.sync="listQuery.page"
      :limit.sync="listQuery.pageSize"
      @pagination="getList"
    />

    <el-dialog title="审核" :visible.sync="showDialog" width="30%">
      <el-radio-group v-model="status">
        <el-radio :label="2">通过</el-radio>
        <el-radio :label="3">拒绝</el-radio>
      </el-radio-group>
      <span slot="footer" class="dialog-footer">
        <el-button @click="cancel">取消</el-button>
        <el-button type="primary" @click="ok(0)">确定</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
import { fetchList, exportExcel, postAudit } from "@/api/blacklists";
import Pagination from "@/components/Pagination";
import { blacklistOptions, statusOptions, reportOptions } from "@/const";

export default {
  name: "blacklist",
  components: { Pagination },
  data() {
    return {
      blacklistOptions,
      statusOptions,
      reportOptions,
      list: null,
      total: 0,
      listLoading: true,
      listQuery: {
        page: 1,
        pageSize: 20,
        audit_status: 0,
        nickname: undefined,
        identity: 0,
        source: 0,
      },
      downloadLoading: false,
      multipleSelection: [],
      showDialog: false,
      status: "",
      row: null,
    };
  },
  mounted() {
    this.getList();
  },
  methods: {
    selectable(row) {
      return row.audit_status === 1;
    },
    async getList() {
      this.listLoading = true;
      const res = await fetchList(this.listQuery);
      if (res.data) {
        this.list = res.data.list;
        this.total = res.data.pageParam.total;
      }
      this.listLoading = false;
    },
    // 查询
    search() {
      this.listQuery.page = 1;
      this.getList();
    },
    reset() {
      this.listQuery = {
        page: 1,
        pageSize: 20,
        audit_status: 0,
        nickname: undefined,
        identity: 0,
        source: 0,
      };
      this.getList();
    },
    // 审核
    handleAudit(row) {
      this.row = row;
      this.showDialog = true;
      this.status = "";
    },
    // 取消审核
    cancel() {
      this.showDialog = false;
      this.status = "";
    },
    /** 确定审核
     * status 0：列表立即审核 2：一键通过 3：一键拒绝
     *
     */
    async ok(status) {
      let id = [];
      if (status === 0) {
        if (!this.status) {
          return this.$message({
            message: "请选择审核状态",
            type: "warning",
          });
        }
        id = [this.row.id];
        status = this.status;
      } else {
        id = this.multipleSelection.map((item) => item.id);
      }
      let postData = {
        id,
        status,
      };
      const res = await postAudit(postData);
      if (res) {
        this.$message({
          message: res.msg,
          type: "success",
        });
        this.cancel();
        this.getList();
      }
    },
    // 查看
    handleView(row) {
      this.$router.push({
        path: "/blacklist/index/info",
        query: {
          id: row.id,
        },
      });
    },
    handleAdoptView(row) {
      this.$router.push({
        path: "/petSalvation/adopt/info",
        query: {
          id: row.oid,
        },
      });
    },
    // 数据导出
    async handleDownload() {
      this.downloadLoading = true;
      const res = await exportExcel(this.listQuery);
      if (res) {
        this.downloadFile(res, "黑名单列表");
      }
      this.downloadLoading = false;
    },

    /** 多选
     * val 选中的数组
     *
     */
    handleSelectionChange(val) {
      this.multipleSelection = val;
    },
  },
};
</script>
